<template>
	<view class="page-search">
		<view class="search">
			<view class="input">
				<cl-input
					prefix-icon="cl-icon-search"
					:placeholder="hotTitle"
					v-model="search"
				></cl-input>
			</view>
			<image src="/static/icon/message.png" />
		</view>
		<!-- 今日热点 -->
		<view class="hot">
			<view class="head">
				<view class="icon">
					<image src="/static/icon/hot.png" />
				</view>
				<view class="title">今日热点</view>
			</view>
			<view class="list">
				<view class="item">
					<view class="name">克里斯蒂场均15+</view>
					<view class="name" @tap="toPages('/pages/index/index')">欧文：我会把你教我的全交给他</view>
					<view class="name">达拉斯今年或将夺冠</view>
					<view class="name">独行侠引进2米一中峰</view>
					<view class="name" @tap="toPages('/pages/search/ind')">湖人大胜送奇才16连败</view>
				</view>
			</view>
		</view>
		<!-- 话题榜 -->
		<!-- <view class="rank">
			<view class="head">
				<view class="icon">
					<image src="/static/icon/topic.png" />
				</view>
				<view class="title">话题榜</view>
			</view>
			<view class="list">
				<view class="item" v-for="(item, index) in rank" :key="index">
					<view class="num" :class="{ 'is-three': index < 3 }">{{ index + 1 }}</view>
					<view class="name"
						><cl-text
							:value="item.name"
							color="#000000"
							:size="28"
							:ellipsis="1"
						></cl-text
					></view>
					<view class="tag is-hot" v-if="item.isHot">热</view>
					<view class="tag is-new" v-if="item.isNew">新</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			hotTitle: "热搜：热搜内容标题",
			search: "",
			hot: [
				{ name: "各地楼价持平稳上升" },
				{ name: "中国经济半年报" },
				{ name: "穿拖鞋驾车" },
				{ name: "各地楼价持平稳上升" },
			],
			rank: [
				{
					name: "各地楼价持平稳上升各地楼价持平稳上升各地楼价持平稳上升",
					isHot: true,
					isNew: false,
				},
				{ name: "各地楼价持平稳上升", isHot: false, isNew: true },
				{ name: "各地楼价持平稳上升", isHot: false, isNew: true },
				{ name: "各地楼价持平稳上升", isHot: false, isNew: false },
				{ name: "各地楼价持平稳上升", isHot: false, isNew: false },
				{ name: "各地楼价持平稳上升", isHot: false, isNew: false },
				{ name: "各地楼价持平稳上升", isHot: false, isNew: false },
				{ name: "各地楼价持平稳上升", isHot: false, isNew: false },
			],
		};
	},
	methods: {
		toPages(page){
			uni.navigateTo({
				url:page
			})
		}
	},
};
</script>

<style lang="scss">
.page-search {
	.search {
		display: flex;
		align-items: center;
		width: 100%;
		height: 123rpx;
		padding: 0 35rpx;
		background-color: #f95859;
		box-sizing: border-box;

		.input {
			flex: 1;
		}

		image {
			width: 38rpx;
			height: 35rpx;
			margin-left: 30rpx;
		}
	}
	.hot {
		padding: 30rpx 12rpx 10rpx 30rpx;
		.head {
			display: flex;
			align-items: center;
			margin-bottom: 41rpx;

			.icon {
				margin-right: 22rpx;
				image {
					width: 23rpx;
					height: 35rpx;
				}
			}
			.title {
				font-size: 36rpx;
				font-weight: 400;
				color: #000000;
			}
		}
		.list {
			display: flex;
			flex-wrap: wrap;
		}
		.item {
			height: 66rpx;
			margin-right: 18rpx;
			margin-bottom: 20rpx;
			padding: 0 38rpx;
			background-color: #f2f2f2;
			border-radius: 33rpx;
			line-height: 66rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #000000;
		}
	}
	.rank {
		padding: 30rpx 40rpx;
		.head {
			display: flex;
			align-items: center;
			margin-bottom: 46rpx;
			.icon {
				width: 35rpx;
				height: 35rpx;
				margin-right: 22rpx;
				image {
					width: 35rpx;
					height: 35rpx;
				}
			}
			.title {
				font-size: 36rpx;
				font-weight: 400;
				color: #000000;
			}
		}
		.item {
			display: flex;
			align-items: center;
			position: relative;
			margin-bottom: 24rpx;
		}
		.num {
			margin-right: 34rpx;
			color: #ffab6a;
		}
		.is-three {
			color: #fe273f;
		}
		.name {
			width: 80%;
			font-size: 28rpx;
			font-weight: 400;
			color: #000000;
		}
		.tag {
			position: absolute;
			right: 0;
		}
		.is-hot {
			width: 34rpx;
			height: 34rpx;
			background-color: #fe273f;
			border-radius: 10rpx;
			text-align: center;
			font-size: 20rpx;
			font-weight: 400;
			color: #ffffff;
		}
		.is-new {
			width: 34rpx;
			height: 34rpx;
			background-color: #f6b37f;
			border-radius: 10rpx;
			text-align: center;
			font-size: 20rpx;
			font-weight: 400;
			color: #ffffff;
		}
	}
}
</style>
